<template>
    <div class="register">
        <div class="top" @click="$router.go(-1)"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)" alt="">
        </div>
        <div class="title textColor">{{ $t('试用账号申请') }}</div>
        <ExInput :label="$t('账号')" :placeholderText="$t('请输入账号')" v-model="username" />
        <ExInput :label="$t('密码')" :placeholderText="$t('密码（6-12个字符）')" v-model="password" typeText="password" />
        <ExInput :label="$t('确认密码')" :placeholderText="$t('请确认密码')" v-model="repassword" typeText="password" />
        <ExInput :label="$t('试用码')" :placeholderText="$t('试用码')" v-model="usercode" />
        <div><span @click="$router.push('/customerService')" style="text-decoration: underline" class="colorMain">{{
            $t('点此联系客服') }}</span>,<span class="textColor">{{ $t('取得试用码') }}</span></div>
        <div class="btn btnMain activeBKClick" @click="register">{{ $t('确认') }}</div>
    </div>
</template>

<script>
import { Popup } from "vant";
import ExInput from "@/components/ex-input";
import Axios from "@/API/login.js";
import { mapActions, mapGetters } from 'vuex';
import { GET_USERINFO } from '@/store/const.store';
export default {
    components: {
        [Popup.name]: Popup,
        ExInput,
    },
    data() {
        return {
            username: '',
            password: "",
            repassword: '',
            usercode: ''
        }
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        }),
    },
    mounted() {
    },
    methods: {
        ...mapActions('user', [GET_USERINFO]),
        register() {
            if (this.username == '') {
                this.$toast(this.$t('请输入账号'));
                return;
            }
            if (this.username.length < 6 || this.username.length > 30) {
                this.$toast(this.$t('账号长度必须6-30位'));
                return;
            }

            if (this.password == '') {
                this.$toast(this.$t('请输入密码'));
                return
            }
            if (this.password.length < 6) {
                this.$toast(this.$t('密码（6-12个字符）'));
                return
            }
            if (this.repassword !== this.password) {
                this.$toast(this.$t('密码不一致'));
                return
            }
            if (this.usercode == '') {
                this.$toast(this.$t('请输入试用码'));
                return
            }

            //this.show = true
            this.testLogin();
        },
        testLogin() {
            Axios.registerTest({
                username: this.username,
                password: this.password,
                re_password: this.repassword,
                usercode: this.usercode,
            }).then((res) => {
                this.GET_USERINFO(res.data)
                this.$router.push('/home')
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.activeBKClick {
    &:active {
        @include themify() {
            background: themed("color_main");
        }

        opacity: 0.5;
    }
}

.activeClick {
    &:active {
        background: #fff;
        opacity: 0.5;
    }
}

.register {
    width: 100%;
    box-sizing: border-box;
    padding: 32px;
    font-size: 26px;
}

.top {
    padding-left: 18px;
    padding-top: 18px;

    img {
        width: 37px;
        height: 37px;
    }
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 66px;
}

.re-tab {
    margin-bottom: 44px;

    div {
        padding: 0 36px;
        height: 68px;
        line-height: 68px;
        text-align: center;
        border-radius: 8px;
        margin-right: 20px;
    }

    .active {
        @include themify() {
            background: themed("tab_background");
        }

        @include themify() {
            color: themed("text_color");
        }
    }
}

.forget {
    color: #1D91FF;
    font-size: 24px;
    line-height: 28px;
}

.btn {
    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    margin-top: 40px;
    border-radius: 10px;
}

.noTips {
    margin-top: 48px;
}

.protocol {
    display: flex;
    align-items: center;
    height: 30px;

    i {
        width: 30px;
        height: 30px;
        margin-right: 18px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
